// 1.用控制图片框的left
// 2.标记点跟动
(function(){
var box = document.getElementsByClassName("lunbokuang")[0];
var imgs = box.getElementsByClassName("imgs")[0];
var lis = imgs.getElementsByClassName("image");
var tag = box.getElementsByClassName("tag");
var tags = box.getElementsByClassName("tags")[0];
var targetWidth = imgs.offsetWidth;//图片区总长度。
var len = lis.length; //图片列表长度。
var lis_width = lis[0].clientWidth;//单张图片的宽度
var imgs_p = window.getComputedStyle(imgs,null);//获取元素属性值；
var count = 0;//标记点运动的参照数
var tag_len = tag.length;//圆点列表长度

var start = function(){
   setInterval(function(){
        photomove();      
         changeindex();      
    },3000);   
          click();
};

var photomove = function(){
    count ++;//标记点运动逻辑，此延迟函数运行说明即将跳转到下一张图片。
    if(count%len === 1){imgs.style.transition = "left .3s";}
    imgs.style.left = (-lis_width) * (count%len) + "px";

    imgs.addEventListener("transitionend",function(){
        //    console.log(count)//移动四下到第五张，所以是len-1；
           if(count%(len) === (len-1)){//当图片移到第五张时，让图片列表在没有动画效果的作用下置零归位。
               count = 0;
               imgs.style.transition = "none";
               imgs.style.left = 0 + "px";
               
           }
       });
}

var changeindex = function(){//圆点被标记时的位置
    for(var i = 0; i < tag_len; i ++){
        tag[i].classList.remove("active");//开始前把所有active类名清一遍

    }
    tag[count%(tag_len)].classList.add("active");

   };


var click = function(){//点击选图运动

    for(var i = 0; i < tag_len; i++){
     tag[i].T_count = i;// 为每个圆点添加一个序号；
    };
    tags.addEventListener("click",function(e){
     var target = e.target;
     count = target.T_count;//根据点击圆点的的序号来设置图片列表的left值。
     imgs.style.transition = "none";
     imgs.style.left = (-lis_width * count) + "px";
    setTimeout(function(){imgs.style.transition = "left .3s";},0); 
    changeindex();
     
 })
 };   
return start();//启动轮播图。
}());
